<template>
  <div :style="{'padding':'10px'}">
    <div :id="dom" class="double_line"></div>
  </div>
</template>

<script>
import {defineComponent, reactive, inject, onMounted} from "vue"
import {get_equ_details} from "@/api/cockpit/data";
import {useRoute, useRouter} from "vue-router";
import {message} from "ant-design-vue";
import {decode_data} from "@/utils/base64";
import {double_line_new} from "@/utils/echarts_option/double_line_new";
import {handle_time} from "@/utils/handle_time";

export default defineComponent({
  name: "echarts_double_line",
  props: {
    dom: {
      type: String,
      default: "double_line"
    },
    color: {
      type: String,
      default: ''
    },
    color2: {
      type: String,
      default: ''
    },
    theme: {
      type: String,
      default: ''
    },
    theme_black: {
      type: String,
      default: ''
    },
    date: {
      type: String,
      default: ''
    },
  },
  setup(props) {
    let echarts = inject("echarts");//引入
    const router = useRouter()
    const route = useRoute()
    const code = decode_data(route.query.uEquipmentCode)

    let today = handle_time(new Date());
    if (props.date) {
      today = props.date
    }
    try {
      today = route.query.date
    } catch (e) {
      today = ""
    }
    const data_object = reactive({
      params: {
        uEquipmentCode: code,
        HisDateTime: today
      }
    })

    if (!code) {
      router.back()
      return
    }

    function handle_data_line(data) {
      let x_data = []
      let y_data_c = []
      let y_data_v = []
      for (let i = 0; i < data.length; i++) {
        x_data.push(data[i].reTime)
        y_data_c.push(data[i].currentValue)
        y_data_v.push(data[i].voltage)
      }
      return {x_data, y_data_c, y_data_v}

    }

    const init_echarts = (range, data) => {

      const {x_data, y_data_c, y_data_v} = handle_data_line(data)

      if (props.color) {
        //设置主题色
        double_line_new.backgroundColor.colorStops[0].color = props.theme_black //'rgba(248,135,81, 0)'
        double_line_new.backgroundColor.colorStops[1].color = props.theme //'rgba(248,135,81,0.5)'

        double_line_new.series[0].itemStyle.normal.color = props.color//'rgba(248,135,81)'
        double_line_new.series[0].itemStyle.normal.lineStyle.color = props.color//'rgba(248,135,81)'
        double_line_new.series[0].label.normal.color = props.color//'rgba(248,135,81)'
        double_line_new.series[0].areaStyle.color = props.color//'rgba(248,135,81)'
        double_line_new.series[0].markLine.lineStyle.color = props.color//'rgba(248,135,81)'

        double_line_new.series[1].itemStyle.normal.color = props.color2//'rgba(81,137,248)'
        double_line_new.series[1].itemStyle.normal.lineStyle.color = props.color2//'rgba(81,137,248)'
        double_line_new.series[1].label.normal.color = props.color2//'rgba(81,137,248)'
        double_line_new.series[1].areaStyle.color = props.color2//'rgba(81,137,248)'
        double_line_new.series[1].markLine.lineStyle.color = props.color2//'rgba(81,137,248)'
      }


      double_line_new.series[0].data = y_data_c
      double_line_new.series[1].data = y_data_v
      double_line_new.xAxis[0].data = x_data
      double_line_new.series[0].markLine.data[0].yAxis = range.cMax
      double_line_new.series[1].markLine.data[0].yAxis = range.vMax
      const echart = echarts.init(document.getElementById(props.dom));
      echart.setOption(double_line_new)
      window.addEventListener("resize", function () {
        echart.resize();
      });

    }
    const get_data = async () => {
      const res = await get_equ_details(data_object.params)
      console.log(res)
      if (res.code === 1) {
        init_echarts(res.data.tjBaseOutPut, res.data.tjcvdOutPut)
        return
      }
      message.warning(res.message)

    }
    /**
     * 数据初始化
     * */
    onMounted(() => {
      document.getElementById(props.dom).removeAttribute('_echarts_instance_')
      get_data()
    })
    return {}
  }
});
</script>

<style scoped lang="scss">
.double_line {
  width: 100%;
  height: 400px;
}
</style>
